<template>
  <div class="my-info-container">
    <el-descriptions class="my-info-descriptions" :title="page.employeeName" :column="3" border>
      <!-- 添加 my-info-title 类到标题 -->
      <template slot="title">
        <div class="my-info-title">{{page.employeeName}}的个人信息</div>
      </template>

      <!-- 基本信息 -->
      <el-descriptions-item class="my-info-item">
        <template slot="label">
          <i class="el-icon-user"></i>
          员工ID
        </template>
        <span class="my-info-highlight">{{page.employeeId || '未知'}}</span>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          员工号
        </template>
        {{page.employeeNo || '未知'}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        {{page.employeeName || '未知'}}
      </el-descriptions-item>

      <!-- 联系信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{page.employeePhone || '未知'}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          邮箱
        </template>
        {{page.email || '未知'}}
      </el-descriptions-item>

      <!-- 身份信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          账号
        </template>
        {{page.account || '未知'}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-lock"></i>
          密码
        </template>
        <div class="password-container">
          <span class="password-text">{{ showPassword ? page.password : '********' }}</span>
          <i
              class="password-toggle"
              :class="showPassword ? 'el-icon-view' : 'el-icon-view'"
              @click="showPassword = !showPassword"
          ></i>
        </div>
      </el-descriptions-item>

      <!-- 个人信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-male"></i>
          性别
        </template>
        {{formatGender(page.gender)}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          出生日期
        </template>
        {{formatDate(page.birthDate)}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-time"></i>
          入职日期
        </template>
        {{formatDate(page.hireDate)}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-management"></i>
          所属部门
        </template>
        <el-tag class="my-info-tag" size="small">
          <span v-if="loadingDepartment && !departmentCache[page.departmentId]">加载中...</span>
          <span v-else>{{ currentDepartmentName }}</span>
        </el-tag>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-suitcase"></i>
          职位
        </template>
        {{page.position || '未知'}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          职员等级
        </template>
        <el-tag class="my-info-tag" size="small">{{formatRole(page.role)}}</el-tag>
      </el-descriptions-item>

      <!-- 薪资和假期信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-coin"></i>
          薪资级别
        </template>
        {{formatSalaryLevel(page.currentSalaryLevel)}}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          剩余年假
        </template>
        {{formatAnnualLeave(page.remainingAnnualLeave)}}
      </el-descriptions-item>

      <!-- 状态信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-circle-check"></i>
          在职状态
        </template>
        <el-tag class="my-info-tag" :type="page.isActive ? 'success' : 'danger'" size="small">
          {{formatActiveStatus(page.isActive)}}
        </el-tag>
      </el-descriptions-item>

      <!-- 备注信息 -->
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-edit"></i>
          备注
        </template>
        {{page.comments || '无'}}
      </el-descriptions-item>

      <!-- 修改按钮 - 横跨整个宽度 -->
      <el-descriptions-item :span="3" class="full-width-button-item">
        <div class="button-container">
          <el-button
              class="my-info-button"
              type="primary"
              size="medium"
              @click="toUpdateEmployee"
          >
            <i class="el-icon-edit"></i> 修改个人信息
          </el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <div class="my-info-footer">
      最后更新: {{new Date().toLocaleDateString()}}
    </div>
  </div>

</template>
<style src="../../assets/style/MyInfo.css"></style>
<script src="../../script/Mine/myinfo.js"></script>